<template>
  <view class="component-container" v-if="isVisible" @click="cancel">
    <view class="content" @click.stop="() => {}">
      <view class="ask-text">{{ currentSessionData?.thing ?? '' }}</view>
      <view class="control">
        <view class="button" @click="cancel">取消</view>
        <view class="button confirm-button" @click="confirmOk">确认</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { SessionData } from './type'

const isVisible = ref(false)
const currentSessionData = ref<SessionData>()
function askFor(sessionData: SessionData) {
  isVisible.value = true
  currentSessionData.value = sessionData
}
function cancel() {
  if (currentSessionData.value?.rejectAfter != null) {
    currentSessionData.value?.rejectAfter()
  }
  isVisible.value = false
}
function confirmOk() {
  currentSessionData.value?.agreementAfter()
  isVisible.value = false
}
defineExpose({
  askFor
})
</script>

<style scoped lang="scss">
.component-container {
  position: fixed;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(0 0 0 / 33%);
  inset: 0;

  .content {
    display: flex;
    padding: 20rpx;
    width: 84%;
    border-radius: 18rpx;
    background-color: #fff;
    flex-direction: column;
    box-sizing: border-box;

    .ask-text {
      padding: 20rpx 20rpx 60rpx;
      font-size: 40rpx;
      font-weight: 700;
      flex-grow: 1;
    }

    .control {
      display: flex;
      justify-content: space-around;
      width: 100%;

      .button {
        padding: 20rpx 0;
        width: 40%;
        font-size: 30rpx;
        font-weight: 700;
        border: 1.5px solid #ddd;
        border-radius: 12rpx;
        text-align: center;
        box-sizing: border-box;
      }

      .confirm-button {
        border: none;
        background-color: #fdca30;
      }
    }
  }
}
</style>
